<template>
  <div id="tmpl">
    <!-- 1.0 图片详情和图片缩略图 -->
    <div id="dest">
      <div class="title">
        <h4>{{list.title}}</h4>
        <p>
          {{list.add_time}}  {{list.click}}次浏览
        </p>
      </div>
      <!-- 图片缩略图 -->
      <div class="mui-content">
            <ul class="mui-table-view mui-grid-view mui-grid-9">
                <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3" v-for="(item, index) in imgs">
                    <img class="preview-img" :src="item.src" height="100" @click="$preview.open(index, imgs)">
                </li>
            </ul> 
      </div>

      <p class="content" v-html="list.content"></p>
    </div>

    <!-- 2.0评论 -->
    <div class="comment">
    <comment :id="id"></comment>
    </div>
  </div>
</template>

<script>
  import { Toast } from 'mint-ui';
  import common from '../../kits/common.js';
  import comment from '../subcom/comment.vue';
  export default {
    components: {
      comment
    },
    data() {
      return {
        id: 0,
        list: [],
        imgs: []
      }
    },
    props: "id",
    created() {
      this.id = this.$route.params.id;
      this.getinfo();
      this.getimgs();
    },
    methods: {
      //获取详情信息
      getinfo() {
        var url = common.apidomain + '/api/getimageInfo/' + this.id;

        this.$http.get(url).then(function(res) {
          var body = res.body;
          if(body.status != 0) {
            Toast(body.message);
            return;
          }
          this.list = body.message[0];
        })
      },
      //获取缩略图
      getimgs() {
        var url = common.apidomain + '/api/getthumimages/' + this.id;

        this.$http.get(url).then(function(res) {
          var body = res.body;
          if(body.status != 0) {
            Toast(body.message);
            return;
          }
          body.message.forEach(function(item) {
            let img = document.createElement("img");
            img.src = item.src;

            setTimeout(function() {
              item.h = img.height;
              item.w = img.width;
            })
          })
          this.imgs = body.message;
        })
      }
    }
  }
</script>

<style scoped>
  #dest .title p {
    margin-top: 10px;
    font-size: 14px;
  }
</style>